<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
        <!-- v-if和 v-show 具有类似的功能，不过 v-if才是真正的条件渲染，它会根据表达式适当地销毁 
            或重建元素及绑定的事件或子组件。若表达式初始值为 false，则一开始元素/组件并不会渲染，
            只 有当条件第 一 次变为真时才开始编译。
            而 v-show 只是简单的 css 属性切换，无论条件真与否，都会被编译。
            相比之下， v-if更适合
            条件不经常改变的场景，因为它切换开销相对较大，
            而 v-show 适用于频繁切换条件。 -->
        <input v-show="status === 1" type="text" v-model="name" placeholder="你的名字">
        <h1>你好,{{name}}</h1>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        // 变量app表示一个vue实例
        var app = new Vue({
            el: '#app', //用于指定一个页面中存在的Dom元素来挂载Vue示例。挂载成功后可以使用app.$el来访问该元素
            data: {
                name: 'liming',
                status: 1
            }
        })
    </script>
</body>
</html>